<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no"
		/>
		<meta name="format-detection" content="telephone=no" />
		<meta name="format-detection" content="email=no" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<title>编辑个人信息</title>
		<!-- 引入 vant UI 组件库样式文件 -->
		<link rel="stylesheet" href="../common/css/vant-index.css" />
		<link rel="stylesheet" href="../doctor/css/doctor.css" />
		<style type="text/css">
			.van-button--info{
				background-color: #E22E30;
				border-color: #E22E30;
				font-size: 18px;
			}
			.van-field__label,.van-field--disabled .van-field__label{
				color:var(--van-cell-text-color);
			}
			.van-field__control:disabled{
				color:var(--van-cell-value-color);
				-webkit-text-fill-color:var(--van-cell-value-color);
			}
			.di_top_right .van-field__control {
				text-align: right;
			}
			.van-field__control {
				color: var(--van-cell-value-color);
			}
			.van-row{
				padding: 10px 16px;
			}
			.van-col{
				font-size: 14px;
			}
			.van-col input{
				width: 25%;
				border: none;
				text-align: right;
			}
			.van-col span:first-of-type{
				display: inline-block;
				width: 32%;
				color: #323233;
			}
			.patient_box{
				background: white;
				border-radius: 8px;
				box-shadow: 0px 2px 2px 2px rgba(0, 0, 0, 0.03);
				overflow: hidden;
				padding: 0 3%;
			}
			.patient_box p{
				font-size: 16px;
				padding: 10px 16px;
			}
			.patient_box .van-field__label {
				width: 35%;
			}
		</style>
	</head>

	<body>
		<div id='app' v-cloak>
			<div class="id_container">
				<div class="doctor_left_title" style="margin-top: 0;">
					<span class="doctor_left_title_border"></span>
					<span class="doctor_left_title_name">基本信息</span>
				</div>
				<div class="doctor_box_100 doctor_box">
					<div class="di_top_left">
						<van-uploader v-if="detail.patientsImg" :after-read="afterRead">
							<img :src="detail.patientsImg"/>
						</van-uploader>
					</div>
					<div class="di_top_right">
						<van-cell-group>
						 	<van-field v-model="detail.patientsName" label="姓名" placeholder="请输入用户名" />
						</van-cell-group>
						<van-cell-group>
							<van-cell @click="showPopupSex" title="性别">{{columnsValueSex}}</van-cell>
							<van-popup v-model:show="showSex" position="bottom" :style="{ height: '45%' }">
								<van-picker show-toolbar title="性别" :columns="columnsSex" :default-index="0" @cancel="showSex = false" @confirm="onConfirmSex" />
							</van-popup>
						</van-cell-group>
						<van-cell-group>
							<van-cell title="出生日期" :value='detail.patientsBirthday' @click="showCalendar = true"></van-cell>
							<van-calendar v-model:show="showCalendar" :min-date='minDate' :max-date="maxDate" @confirm="onConfirmCalendar"/>
						</van-cell-group>
						<van-cell-group>
						 	<van-field v-model="detail.patientsMobile" label="手机号码" placeholder="请输入手机号码" disabled @click='linkToEditphone(detail.patientId,detail.patientsMobile)'/>
						</van-cell-group>
						<van-cell-group>
							<van-field
							  v-model="detail.location"
							  type = 'textarea'
							  autosize = 'true'
							  readonly
							  label="所在地区"
							  placeholder=""
							  @click="showAreaup"
							/>
						</van-cell-group>
						<van-popup v-model:show="showArea" round position="bottom">
							  <van-area
								  :area-list="areaList"
								  :columns-num="2"
								  title=""
								  @confirm = "onConfirmArea"
								  @cancel="showArea = false"
								/>
							</van-popup>
						
					</div>
				</div>

				<div class="doctor_left_title">
					<span class="doctor_left_title_border"></span>
					<span class="doctor_left_title_name">病情概况</span>
				</div>
				<div class="patient_box">
					<van-cell-group>
						<van-cell @click="showPopupsStatus" title="糖尿病诊断">{{detail.patientsDiabetisDiagnoseText}}</van-cell>
						<van-popup v-model:show="showStatus" position="bottom" :style="{ height: '45%' }">
							<van-picker show-toolbar title="糖尿病诊断" :columns="columnsStatus " :default-index="0" @cancel="showStatus = false" @confirm="onConfirmStatus" />
						</van-popup>
					</van-cell-group>
					<van-cell-group>
						<van-cell @click="showPopupType" title="糖尿病类型">{{detail.patientsDiabetisTypeName}}</van-cell>
						<van-popup v-model:show="showType" position="bottom" :style="{ height: '45%' }">
							<van-picker show-toolbar title="糖尿病类型" :columns="columnsType" :default-index="0" @cancel="showType = false" @confirm="onConfirmType" />
						</van-popup>
					</van-cell-group>
					<van-cell-group>
						<van-cell title="确诊日期" :value='detail.patientsConfirmedDate' @click="showConfirmedDate = true"></van-cell>
						<van-calendar v-model:show="showConfirmedDate" :min-date='minDate' :max-date="maxDate" @confirm="onConfirmDate"/>
					</van-cell-group>
					<p>血糖值</p>
					<van-row>
						<van-col span="12">
							<span>空腹</span>
							<input class="colora1" type="text":value="detail.sugarLimosis" placeholder="请输入数值" />
							<span class="colora1">mmol/L</span>
							<!--<van-cell-group>
								<van-field v-model="detail.sugarLimosis" label="空腹" placeholder="请输入数值"/>
							</van-cell-group>-->
						</van-col>
						<van-col span="12">
							<span>早餐后</span>
							<input class="colora1" type="text":value="detail.sugarAfterBreakfast" placeholder="请输入数值" />
							<span class="colora1">mmol/L</span>
							<!--<van-cell-group>
								<van-field v-model="detail.sugarAfterBreakfast" label="早餐后" placeholder="请输入数值" />
							</van-cell-group>-->
						</van-col>
					</van-row>
					<van-row>
						<van-col span="12">
							<span>午餐前</span>
							<input class="colora1" type="text":value="detail.sugarBeforeLunch" placeholder="请输入数值" />
							<span class="colora1">mmol/L</span>
							<!--<van-cell-group>
								<van-field v-model="detail.sugarBeforeLunch" label="午餐前" placeholder="请输入数值" />
							</van-cell-group>-->
						</van-col>
						<van-col span="12">
							<span>午餐后</span>
							<input class="colora1" type="text":value="detail.sugarAfterLunch" placeholder="请输入数值" />
							<span class="colora1">mmol/L</span>
							<!--<van-cell-group>
								<van-field v-model="detail.sugarAfterLunch" label="午餐后" placeholder="请输入数值" />
							</van-cell-group>-->
						</van-col>
					</van-row>
					<van-row>
						<van-col span="12">
							<span>晚餐前</span>
							<input class="colora1" type="text":value="detail.sugarBeforeDinner" placeholder="请输入数值" />
							<span class="colora1">mmol/L</span>
							<!--<van-cell-group>
								<van-field v-model="detail.sugarBeforeDinner" label="晚餐前" placeholder="请输入数值" />
							</van-cell-group>-->
						</van-col>
						<van-col span="12">
							<span>晚餐后</span>
							<input class="colora1" type="text":value="detail.sugarAfterDinner" placeholder="请输入数值" />
							<span class="colora1">mmol/L</span>
							<!--<van-cell-group>
								<van-field v-model="detail.sugarAfterDinner" label="晚餐后" placeholder="请输入数值" />
							</van-cell-group>-->
						</van-col>
					</van-row>
					<van-row>
						<van-col span="12">
							<span>睡前</span>
							<input class="colora1" type="text":value="detail.sugarBeforeSleep" placeholder="请输入数值" />
							<span class="colora1">mmol/L</span>
							<!--<van-cell-group>
								<van-field v-model="detail.sugarBeforeSleep" label="睡前" placeholder="请输入数值" />
							</van-cell-group>-->
						</van-col>
						<van-col span="12">
							<span>凌晨</span>
							<input class="colora1" type="text":value="detail.sugarEarlyDay" placeholder="请输入数值" />
							<span class="colora1">mmol/L</span>
							<!--<van-cell-group>
								<van-field v-model="detail.sugarEarlyDay" label="凌晨" placeholder="请输入数值" />
							</van-cell-group>-->
						</van-col>
					</van-row>
					<van-row>
						<van-col span="12">
							<span>HbA1c</span>
							<input class="colora1" type="text":value="detail.hba1c" placeholder="请输入数值" />
							<span class="colora1">%</span>
							<!--<van-cell-group>
								<van-field v-model="detail.hba1c" label="HbA1c" placeholder="请输入数值" />
							</van-cell-group>-->
						</van-col>
					</van-row>
					
				</div>

				<div class="doctor_left_title">
					<span class="doctor_left_title_border"></span>
					<span class="doctor_left_title_name">病情描述</span>
				</div>
				<div class="doctor_box doctor_box_100">
					<van-field
					  v-model="detail.patientsSymptoms"
					  rows="2"
					  autosize
					  type="textarea"
					  maxlength="500"
					  placeholder="请对病情进行描述"
					  show-word-limit
					/>
				</div>

				<div class="edit_doctorinfo">
					<van-button round type="info" block @click='save'>保存</van-button>
				</div>
			</div>
		</div>
	</body>
	<!-- 引入 rem -->
	<script src="../common/js/rem.js"></script>
	<!-- 上线环境用 -->
	<script src="../common/js/vue.global.prod.js"></script>
	<!-- 引入 UI 组件库 -->
	<script src="../common/js/vant.min.js"></script>
	<!-- axios 接口调用 -->
	<script src="../common/js/axios.min.js"></script>
	<script src="../common/js/url.min.js"></script>
	<script src="../base.js"></script>
	<script type="module">
		import {
			getAction,
			postAction,
			spliceUrl,
			getNow,
		} from "../common/js/api/vue3-axios-utils.js";


		const PatientData = {
			data() {
				return {
					url: {
						getDetail:'/patient/pa/get',
						upLoad:'/sys/common/upload',
						getProvince:'/dict/district/info',
						save:'/patient/pa/edit',
						getDiabetesType:'/sys/dict/getDictItems/diabetesType',
						getDiagnoseStatus:'/sys/dict/getDictItems/diagnoseStatus',
					},
					detail:{},
					doctorId:'',
					showSex: false,  //弹窗
					columnsSex: ['男', '女'],
                		columnsValueSex: '',
                		showStatus:false,
                		columnsStatus:[],
                		showType:false,
                		columnsType:[],
                		date:'',
                		showCalendar:false,
                		fieldValue: '',
                		showArea:false,
                		areaList:{
						province_list: {},
						city_list: {},
					},
					showConfirmedDate:false,
					minDate:new Date(1970,0,1),
					maxDate:new Date(new Date().getFullYear(),new Date().getMonth(),new Date().getDate())
				};
			},
			created() {
				this.id = url('?id')
				this.init()
			},
			methods: {
				async init () {
	                await this.handleGetDetail()
	                await this.handleGetProvince()
	                await this.handleGetDiabetesType()
	                await this.handleGetDiagnoseStatus()
	           	},
	           	//获取个人信息
				handleGetDetail(){
					getAction(spliceUrl(this.url.getDetail),{patientId:this.id}).then((res) => {
						res = res.data
						console.log('handleGetDetail',res)
						if(res.success){
							this.detail = res.result
							if(res.result.patientsSex==1){
								this.columnsValueSex = '男'
							}else{
								this.columnsValueSex = '女'
							}
						}
					})
				},
				//获取糖尿病类型
				handleGetDiabetesType(){
					getAction(spliceUrl(this.url.getDiabetesType),{}).then((res) => {
						res = res.data
						console.log('handleGetDiabetesType',res)
						if(res.success){
							for(var i=0;i<res.result.length;i++){
								this.columnsType.push(res.result[i].text)
							}
						}
					})
				},
				//获取诊断
				handleGetDiagnoseStatus(){
					getAction(spliceUrl(this.url.getDiagnoseStatus),{}).then((res) => {
						res = res.data
						console.log('handleGetDiagnoseStatus',res)
						if(res.success){
							for(var i=0;i<res.result.length;i++){
								this.columnsStatus.push(res.result[i].text)
							}
						}
					})
				},
				//获取省份
				handleGetProvince(){
					getAction(spliceUrl(this.url.getProvince),{}).then((res) => {
						res = res.data
						console.log('handleGetProvince',res)
						if(res.success){
							let province_list={}
							let formArr = res.result.provinceInfo
							for(var x in formArr){
								province_list[formArr[x].districtId] = formArr[x].name;
							}

							let city_list={}
							let formArr1 = res.result.cityInfo
							for(var y in formArr1){
								city_list[formArr1[y].districtId] = formArr1[y].name;
							}
							this.areaList.province_list = province_list
							this.areaList.city_list = city_list
						}
					})
				},
				//传头像
				afterRead(file) {
			      // 此时可以自行将文件上传至服务器
			    		console.log(file);
			    		let formData = new FormData();
      				formData.append("file", file.file);
			    		postAction(spliceUrl(this.url.upLoad),formData).then((res) => {
						res = res.data
						console.log('upLoad',res)
						if(res.success){
							this.detail.patientsImg = res.message
						}
					})
			  	},
			  	//选择性别
			  	showPopupSex() {
	                this.showSex = true
	            },
	            onConfirmSex(value, index) {
	                this.columnsValueSex = value
	                this.showSex = false
	                this.detail.patientsSex = index+1
	            },
	            //选择生日日历
	            showCalendarpop(){
	            		this.showCalendar = true;
	            },
	            formatDate(date) {
			      return `${date.getFullYear()}-${getNow(date.getMonth() + 1)}-${getNow(date.getDate())}`;
			    },
			    onConfirmCalendar(date) {
			      this.showCalendar = false;
			      this.date = this.formatDate(date);
			      this.detail.patientsBirthday = this.formatDate(date)
			      console.log('date',this.date)
			    },
			    //选择确诊日历
	            showConfirmedDate(){
	            		this.showConfirmedDate = true;
	            },
			    onConfirmDate(date) {
			      this.showConfirmedDate = false;
			      //this.date = this.formatDate(date);
			      this.detail.patientsConfirmedDate = this.formatDate(date)
			      console.log('date',this.date)
			    },
			    //跳转编辑手机号码页面
			    linkToEditphone(pid,phone){
			    		window.location.href = './editPhone.html?pid='+pid+'&phone='+phone
			    },
			    //选择所在地区
			    onConfirmArea(e){
			    		this.showArea = false
			    		console.log('e',e)
			    		if(e[0].name!=e[1].name){
			    			this.detail.location = e[0].name+e[1].name
			    		}else{
			    			this.detail.location = e[0].name
			    		}
			    		this.detail.provinceId = e[0].code
			    		this.detail.cityId = e[1].code
			    },
			    showAreaup(){
			    		this.showArea = true
			    		console.log('show',this.showArea)
			    },
			    //选择诊断
			    showPopupsStatus(){
			    		this.showStatus = true
			    },
			    onConfirmStatus(value, index) {
	                this.detail.patientsDiabetisDiagnoseText = value
	                this.showStatus = false
	                this.detail.patientsDiabetisDiagnose = index
	            },
	            //选择糖尿病类型
			    showPopupType(){
			    		this.showType = true
			    },
			    onConfirmType(value, index) {
	                this.detail.patientsDiabetisTypeName = value
	                this.showType = false
	                this.detail.patientsDiabetisType = index+1
	            },
			    //修改个人信息
			    save(){
			    		postAction(spliceUrl(this.url.save),this.detail).then((res) => {
						res = res.data
						console.log('save',res)
						if(res.success){
							this.$toast.success({
								message:'修改成功',
								duration:300,
								onClose:function(){
									window.location.href = './patientStudio.html?id='+url('?id')
								}
							});


						}
					})
				},

			},
		};

		const app = Vue.createApp(PatientData);

		app.use(vant);

		// 通过 CDN 引入时不会自动注册 Lazyload 组件
		// 可以通过下面的方式手动注册
		app.use(vant.Lazyload);

		// 调用函数组件，弹出一个 Toast
		// vant.Toast("刷新成功");

		app.mount("#app");
	</script>

</html>

